<template>
    <el-row>
        <el-col :span="24">
            <el-card>
                <template #header>
                    <div class="card-header">
                        <span>帖子分析 - 发布时间分布</span>
                    </div>
                </template>
                <div id="postTimeCharts" style="width: 100%; height: 400px;"></div>
            </el-card>
        </el-col>
    </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import axios from 'axios';
import { ElMessage } from 'element-plus';

const processRawTimeData = (rawTimes: string[]) => {
    // 初始化24小时计数（0-23时，初始为0）
    const hourCount = Array.from({ length: 24 }, (_, i) => ({
        hour: i,
        count: 0
    }));

    rawTimes.forEach(timeStr => {
        try {
            // 提取小时（如"2025-07-24 08:30:00" -> 8）
            const hour = new Date(timeStr).getHours();
            // 对应小时计数+1（确保小时在0-23范围内）
            if (hour >= 0 && hour < 24) {
                hourCount[hour].count++;
            }
        } catch (error) {
            console.error('解析时间失败：', timeStr, error);
        }
    });
    return hourCount;
};

// 初始化发布时间分布图表
const initPostTimeCharts = (postTimeData: { hour: number; count: number }[]) => {
    // 获取图表容器DOM
    const chartDom = document.getElementById('postTimeCharts');
    if (!chartDom) {
        ElMessage.error('图表容器不存在');
        return;
    }

    // 初始化ECharts实例
    const myChart = echarts.init(chartDom);

    // 处理图表数据（x轴：小时，y轴：帖子数）
    const xAxisData = postTimeData.map(item => `${item.hour}时`); // 格式化显示为"0时"、"1时"等
    const seriesData = postTimeData.map(item => item.count);

    // 图表配置项
    const option = {
        title: {
            text: '24小时帖子发布趋势',
            left: 'center',
            textStyle: { fontSize: 16 }
        },
        tooltip: {
            trigger: 'axis',
            formatter: '{b} 发布了 {c} 篇帖子' // 鼠标悬停提示：如"8时 发布了 25篇帖子"
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true // 防止标签被截断
        },
        xAxis: {
            type: 'category',
            data: xAxisData,
            axisLabel: { interval: 0 }, // 强制显示所有x轴标签
            name: '时间段'
        },
        yAxis: {
            type: 'value',
            name: '帖子数量',
            min: 0,
            minInterval: 1 // 确保y轴为整数（帖子数不能为小数）
        },
        series: [
            {
                name: '发布数量',
                data: seriesData,
                type: 'line',
                smooth: true, // 平滑曲线
                symbol: 'circle', // 数据点形状
                symbolSize: 8, // 数据点大小
                lineStyle: { width: 3, color: '#42b983' }, // 线条样式
                itemStyle: { color: '#2c3e50' }, // 数据点颜色
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{ offset: 0, color: 'rgba(66, 185, 131, 0.3)' }, { offset: 1, color: 'rgba(66, 185, 131, 0)' }]
                    } // 区域填充渐变
                }
            }
        ]
    };

    // 设置配置项并渲染图表
    myChart.setOption(option);

    // 监听窗口大小变化，自动调整图表尺寸
    window.addEventListener('resize', () => {
        myChart.resize();
    });
};

// 页面加载时执行
onMounted(async () => {
    try {
        // 关键修改：请求后端新增的分析接口
        const { data } = await axios.get('/api/post/analysis1');  // 改为新接口地址
        console.log('分析接口返回数据：', data);  // 此时data应包含rawTimes字段

        // 2. 处理数据（使用rawTimes生成小时统计数据）
        let postTimeData;
        if (data.rawTimes) {
            // 用processRawTimeData处理原始时间列表（转换为24小时计数）
            postTimeData = processRawTimeData(data.rawTimes);
        } else {
            throw new Error('接口未返回rawTimes数据');
        }

        // 3. 确保数据完整（补全24小时）
        if (postTimeData.length < 24) {
            const existingHours = new Set(postTimeData.map(item => item.hour));
            for (let i = 0; i < 24; i++) {
                if (!existingHours.has(i)) {
                    postTimeData.push({ hour: i, count: 0 });
                }
            }
            postTimeData.sort((a, b) => a.hour - b.hour);  // 按小时排序
        }

        // 4. 渲染图表
        initPostTimeCharts(postTimeData);

    } catch (error) {
        console.error('图表加载失败：', error);
        ElMessage.error('加载分析数据失败');
    }
});
</script>

<style scoped>
.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #333;
    font-weight: bold;
}

/* 确保图表容器在卡片内正确显示 */
:deep(#postTimeCharts) {
    margin-top: 16px;
}
</style>